import React from 'react';
import {todoListFilterState, useRecoilState} from "../../recoils";

export default function TodoListFilters() {

    const [filter, setFilter] = useRecoilState(todoListFilterState);

    const updateFilter = ({target: {value}}) => {
        setFilter(value);
    };

    return (
        <div className="form-group row">
            <div className="col-sm-6 col-md-4 col-lg-3">
                <select className="form-control" value={filter} onChange={updateFilter}>
                    <option value="Show All">All</option>
                    <option value="Show Completed">Completed</option>
                    <option value="Show Uncompleted">Uncompleted</option>
                </select>
            </div>
        </div>
    );
}

